<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>
<body>
<div class="layui-tab page-content-wrap">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form"  style="width: 90%;padding-top: 20px;">
                {% csrf_token %}
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">菜单ID：</label>
                    <div class="layui-input-block">
                        <input type="text" name="menu_id"  lay-verify="required|username" disabled autocomplete="off" class="layui-input" value={{ data.id }}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父节点：</label>
                    <div class="layui-input-block">
                        <select id="text1" lay-verify="Pname" class="layui-input">
                            {% for m,k in menu.items %}
                                <option value={{ m }}>{{ k }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="p_name"  lay-verify="required|username"  autocomplete="off" class="layui-input" value={{ data.caption }}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单图标：</label>
                    <div class="layui-input-block">
                        <input type="text" id="font" name="font" lay-verify="font" autocomplete="off" value="{{ data.lcon }}" style="display: none">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单链接：</label>
                    <div class="layui-input-block">
                        <input type="level" name="link" lay-verify="link" autocomplete="off" class="layui-input" value={{ data.url }}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号：</label>
                    <div class="layui-input-block">
                        <input type="level" name="order" lay-verify="required|number" autocomplete="order" class="layui-input" value={{ data.order }}>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="remark" lay-verify="remark" class="layui-textarea" style="min-height: 200px">{{ data.remark }}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="adminInfo" style="margin-top: 30px;">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.cookie.js" ></script>
<script src="/static/layui/common.js" ></script>
<script>
    layui.use(['iconPicker','form','element','layer'], function() {
        var iconPicker = layui.iconPicker;
        var form = layui.form();
        form.verify({
            Pname: function(value){
                if(value.length < 1){
                    return '请选择上级菜单节点！';
                }
            }
            ,pname: function(value){
                if(value.length < 1){
                    return '菜单名称不能为空！';
                }
            }
            ,font: function(value){
                if(value.length < 1){
                    return '请选择菜单图标！';
                }
            }
            ,remark: function(value){
                if(value.length < 1){
                    return '备注不能为空！';
                }else if (value.length > 128){
                    return '备注内容长度不能超过128个字符！';
                }
            }

        });
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#font',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 48,
            // 点击回调
            //click: function (base) {
            //    console.log(base);
            //},
            // 渲染成功后的回调
           // success: function(d) {
            //    {#console.log(d);#}
            //}
        });
        form.on('submit(adminInfo)', function(data){
            var P_id=$("#text1 option:selected").val();
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});
            $.ajax({
                url: 'menu_insert.html',
                type: 'POST',
                data:{'key': P_id,'base':data.field},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('资料修改成功！', {icon: 1});
                        //下面为跳出iframe框架的页面跳转
                        setTimeout("window.parent.location.reload();", 2000 )
                    }else {
                        layer.close(index);
                        layer.msg('添加角色失败，请联系系统管理员！', {icon: 2});
                    }
                }
            })
            return false;
        })
    })
</script>